<template>
  <div class="timelinediv">
    <div class="demo-date-picker">
      <el-date-picker
        v-model="value1"
        type="daterange"
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
    </div>
    <el-timeline color>
      <el-timeline-item
        v-for="(activity, index) in activities"
        :key="index"
        :timestamp="activity.crossDate"
        color="red"
      >
        {{ activity.entranceName }}
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import sppApi from '@/api/spp'

export default {
  name: 'VehicleAttendLocus',
  props: {
    plateNo: {
      type: String,
      default: '1'
    },
    crossDate: {
      type: String,
      default: '1'
    }
  },
  data() {
    return { activities: [], pageInfo: { plateNo: '', dayParam: '2023-03-11' }, value1: '' }
  },
  watch: {
    plateNo(newValue) {
      this.pageInfo.plateNo = newValue
      this.initLoadData()
    },
    crossDate(newValue) {
      this.pageInfo.dayParam = newValue
      this.initLoadData()
    }
  },
  mounted() {
    this.initLoadData()
  },
  methods: {
    initLoadData() {
      sppApi.getVehicleattendTimeline(this.pageInfo).then((res) => {
        if (res.code === 200) {
          this.activities = res.data
        }
      })
    }
  }
}
</script>

<style>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
  display: none;
}
.timelinediv {
  width: 100%;
  display: flex;
  justify-content: center;
}
</style>
